import React, { Component } from 'react';
import echarts from 'echarts';

interface IProps {
	dataNumber?: number;
	color?: string;
}
export default class AnnulusComponent extends Component<IProps> {


	componentDidMount() {
		const { dataNumber, color } = this.props
		let data = dataNumber; //数值大小
		let max = 100; //满刻度大小
		if (this.refs.annulus) {
			let myChart1 = echarts.init(this.refs.annulus);
			let option = {
				title: {
					text: '占总隐患数',
					top: '33%',
					left: '15%',
					textStyle: {
						color: color,
						fontSize: 16
					}
				},
				backgroundColor: 'transparent',
				color: [color, 'rgba(255,255,255,.2)'],
				series: [
					{
						type: 'pie',
						center: ['29%', '29%'],
						radius: ['45%', '49%'],
						hoverAnimation: false,
						data: [
							{
								name: '',
								value: data,
								label: {
									show: true,
									position: 'center',
									color: color,
									fontSize: 24,
									fontWeight: 'bold',
									formatter: function (o) {
										return data + '%';
									}
								}
							},
							{
								//画剩余的刻度圆环
								name: '',
								value: max - data,
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						]
					},
					{
						type: 'pie',
						center: ['29%', '29%'],
						radius: ['45%', '49%'],
						hoverAnimation: false,
						data: [
							{
								name: '',
								value: data,
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								itemStyle: {
									color: 'rgba(0,0,0,0)'
								}
							},
							{
								//画中间的图标
								name: '',
								value: 0,
								label: {
									position: 'inside',
									backgroundColor: {
										image:
											''
									},
									padding: 10
								}
							},
							{
								name: '',
								value: max - data,
								label: {
									show: false
								},
								labelLine: {
									show: false
								},
								itemStyle: {
									color: '#E9E9E9'
								}
							}
						]
					}
				]
			};
			myChart1.setOption(option);
		}
	}

	render() {

		return (

			<div ref="annulus" style={{ width: 300, height: 300 }} >
			</div>

		)
	}
}
